<template>
  <a-modal @cancel="onClose" title="恢复" width="45vw" :visible="visible" unmount-on-close>
    <div class="member-msg" v-if="useInfo">
      <div
        >姓名：<span>{{ useInfo.memberName || '-' }}</span></div
      >
      <div
        >手机号：<span>{{ useInfo.phone || '-' }}</span></div
      >
      <div
        >证件类型：<span>{{ useInfo.cardTypeName || '-' }}</span></div
      >
      <div
        >证件号：<span>{{ useInfo.cardNumber || '-' }}</span></div
      >
    </div>
    <page-form :model="form" layout="vertical" :rules="rules" ref="formRef">
      <page-form-item field="reason" label="具体原因" :rules="{ message: '请输入具体原因', required: true }" required size="1">
        <a-textarea class="textarea-in" placeholder="请输入" :max-length="200" v-model="form.reason" auto-size />
      </page-form-item>
    </page-form>
    <template #footer>
      <a-space>
        <a-button @click="onClose">关闭</a-button>
        <a-button type="primary" @click="onConfirm">确认</a-button>
      </a-space>
    </template>
  </a-modal>
</template>

<script setup name="memberRestorelModal">
  import { ref } from 'vue'
  import { getDetail, tonormal } from '@/api/market/member'
  const visible = ref(false)
  const useInfo = ref(null)
  const form = ref({
    id: '',
  })

  // 关闭
  const onClose = () => {
    visible.value = false
  }
  // 打开
  const openModal = (id) => {
    form.value.id = id
    visible.value = true
    getDetails(id)
  }
  const emit = defineEmits(['save'])
  const formRef = ref(null)
  const onConfirm = () => {
    formRef.value.validate((error) => {
      if (error) {
        return false
      } else {
        tonormal({ ...form.value }).then(() => {
          visible.value = false
          form.value = {}
          emit('save')
        })
      }
    })
  }

  const getDetails = (id) => {
    getDetail({ id: id }).then((res) => {
      useInfo.value = res.result
    })
  }

  defineExpose({
    openModal,
  })
</script>
<style lang="less" scoped>
  .member-msg {
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    div {
      width: 50%;
      margin-bottom: 16px;
      span {
        font-weight: 400;
      }
    }
  }
  :deep(.arco-row) {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  :deep(.arco-modal-body) {
    padding: 10px 80px !important;
  }
  :deep(.arco-col) {
    padding: 0 !important;
  }
  .textarea-in {
    width: 100%;
  }
</style>
